<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="h3m1q2.css" rel="stylesheet">
</head>
<!-- 题目h3m1q2
2、 使用html+css完成效果图 
-->

<body>
    <!-- 1 顶部区域 -->
    <div id="div">
        <img id="logo" src="./image/logo.jpg">
        <span id="toprightArea">
            <ul class="toprightlist">
                <li class="topright">尾品汇</li>
                <li class="topright">当当优品</li>
                <li class="topright">数字馆</li>
                <li class="topright">都看阅器</li>
            </ul>
            <img id="iconcount" src="./image/icon_count.png">
        </span>
    </div>

    <!-- 2 分类条区域 -->
    <div id="selectarea">
        <ul class="selectbar">
            <li class="selectli">首页</li>
            <li class="selectli">图书</li>
            <li class="selectli">音像</li>
            <li class="selectli">童装</li>
            <li class="selectli">服装</li>
            <li class="selectli">鞋靴</li>
            <li class="selectli">运动</li>
            <li class="selectli">箱包</li>
            <li class="selectli">美妆</li>
            <li class="selectli">珠宝</li>
            <li class="selectli">家居</li>
            <li class="selectli">食品</li>
            <li class="selectli">酒</li>
            <li class="selectli">手机</li>
            <li class="selectli">数码</li>
            <li class="selectli">电脑</li>
            <li class="selectli">家电</li>
        </ul>
    </div>

    <!-- 3 banner区域 -->
    <div id="bannerarea">
        <img id="banner" src="image/banner.png">
    </div>

    <!-- 4 主内容区 -->
    <div id="maincontent">
        <img id="bookFlag" src="image/bg_bang.gif">

        <!-- 第一本书 -->
        <img id="firstbook" src="image/book-01.jpg">
        <img id="firstrank" src="image/bookNo1.gif">
        <div id="firstbookcontent">
            <p class="booktitle">偷影子的人</p>
            <p class=text>作者: [法]马克·李维(Marc Levy)著</p>
            <p class=text>出版社:湖南文艺出版社</p>
            <p><a class="text">当当价:</a> <b class="price">￥17.90</b></p>
            <p id="detailtext" class=text>
                不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大:他能”偷别人的影子”
            </p>
        </div>

        <!-- 第二本书 -->
        <img id="secondbook" src="image/book-02.jpg">
        <img id="secondrank" src="image/bookNo2.gif">

        <!-- 第三本书 -->
        <img id="thirdbook" src="image/book-03.jpg">
        <img id="thirdrank" src="image/bookNo3.gif">

        <div id="secondbookcontent">
            <p class="booktitle">看见(央视知名记者、主持人柴静:十年个人成长的告白,中国社会变迁的备忘</p>
            <p class=text>作者:柴静 著</p>
            <p class=text>出版社:广西师范大学出版社</p>
            <p> <b class="price">￥29.40</b><a class="sale"> 7.4折</a></p>
        </div>

        <div id="thirdbookcontent">
            <p class="booktitle">改变孩子先改变自己</p>
            <p class=text>作者:贾容韬 贾毅 著</p>
            <p class=text>出版社:作家出版社</p>
            <p> <b class="price">￥22.20</b><a class="sale"> 7.4折</a></p>
        </div>
    </div>
    <!-- 5 底部区域 -->
    <div id="bottominfo">
        <p id="bottomp">
            <a class="bottomtext">Copyright (C)当当网 2004-2017, All Rights Reserved</a>
            <img id="validate" src="image/validate.gif">
            <a class="bottomtext">京ICP证041189号出版物经营许可证新出发京批字第直0673号</a>
        </p>
    </div>

</body>

</html>